<template>
  <div>
    <div class="search">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline demo-ruleForm" 
      :rules="searchRules" ref="searchForm">
        <el-form-item label="课程编号" prop="cid">
          <el-input v-model="searchForm.cid"></el-input>
        </el-form-item>
        <el-form-item label="课程名称" prop="cname">
          <el-input v-model="searchForm.cname"></el-input>
        </el-form-item>
        <el-form-item label="教师" prop="name">
          <el-input v-model="searchForm.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="all">全部</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="course">
      <el-table
      :data="chooseData"
      border
      style="width: 100%"
      height="400px">
        <el-table-column
          prop="cid"
          label="课程编号"
          width="150"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="cname"
          label="课程名称"
          width="240"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="credits"
          label="课程学分"
          width="126"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="time"
          label="课程时间"
          width="240"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="教师"
          width="136"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="teachid"
          label="教学班"
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180"
          header-align="center"
          align="center">
          <template slot-scope="scope">
            <el-button @click="addChoose(scope.row)" type="text">选课</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <h2 class="mychoose">我的选课</h2>
    <div class="choose">
      <el-table
      :data="mychooseData"
      border
      style="width: 100%"
      max-height="500px">
        <el-table-column
          prop="cid"
          label="课程编号"
          width="150"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="cname"
          label="课程名称"
          width="240"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="credits"
          label="课程学分"
          width="126"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="time"
          label="课程时间"
          width="240"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="教师"
          width="136"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          prop="teachid"
          label="教学班"
          width="120"
          header-align="center"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          width="180"
          header-align="center"
          align="center">
          <template slot-scope="scope">
            <el-button @click="deleteChoose(scope.row)" type="text">退课</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getChoose } from '@/api/choose'
import { searchCourse } from '@/api/choose'
import { addSC } from '@/api/choose'
import { getMy } from '@/api/choose'
import { deleteStuC } from '@/api/choose'
import { getPreCourse } from '@/api/choose'
import { getIs } from '@/api/choose'
export default {
  data(){
    return{
      chooseData:[],
      mychooseData:[],
      term:'',
      flag:true,
      searchForm:{
        cid:'',
        cname:'',
        name:''
      },
      searchRules:{
        cid:[
          {pattern:/^\d+$/,message:'课程号不能包含字母及其他字符',trigger:'blur'}
        ],
        cname:[
          {pattern:/^\S{2,}$/,message:'请输入长度两位以上的非空字符',trigger:'blur'}
        ],
        name:[
          {pattern:/^\S{2,}$/,message:'请输入长度两位以上的非空字符',trigger:'blur'}
        ]
      }
    }
  },
  methods: {
    addChoose(row){
      for(let i=0;i<this.mychooseData.length;i++){
        let arr=this.mychooseData[i].time.split(' ')
        if(row.time.indexOf(arr[0])!==-1||row.time.indexOf(arr[1])!==-1){
          this.flag=false
        }
      }
      getIs({cid:row.cid}).then(res=>{
        if(res.data.status===0){
          if(res.data.data.precourse){
            getPreCourse({cid:row.cid}).then(res=>{
              if(res.data.status===0){
                if(this.flag){
                  const date=new Date(Date.now())
                  if((date.getMonth()+1)<=6){
                    this.term=`${date.getFullYear()-1}-${date.getFullYear()}-2`
                  }else{
                    this.term=`${date.getFullYear()}-${date.getFullYear()+1}-1`
                  }
                  const sc={}
                  sc.cid=row.cid
                  sc.term=this.term
                  sc.teachid=row.teachid
                  setTimeout(()=>{
                    addSC(sc).then(res=>{
                      if(res.data.status===0){
                        this.$nextTick(()=>{
                          getMy().then(res=>{
                            if(res.data.status===0){
                              this.mychooseData=res.data.data
                            }
                          })
                        })
                        this.$message({
                          message: '选课成功',
                          type: 'success'
                        })
                      }else{
                        this.$message({
                          message: '选课失败',
                          type: 'error'
                        })
                      }
                    })
                  },300)
                }else{
                  this.$message({
                    message: '课程冲突',
                    type: 'error'
                  })
                }
              }else{
                this.$message({
                  message: '请修完先修课程再选吧！',
                  type: 'error'
                })
              }
            })
          }else{
            if(this.flag){
              const date=new Date(Date.now())
              if((date.getMonth()+1)<=6){
                this.term=`${date.getFullYear()-1}-${date.getFullYear()}-2`
              }else{
                this.term=`${date.getFullYear()}-${date.getFullYear()+1}-1`
              }
              const sc={}
              sc.cid=row.cid
              sc.term=this.term
              sc.teachid=row.teachid
              setTimeout(()=>{
                addSC(sc).then(res=>{
                  if(res.data.status===0){
                    this.$nextTick(()=>{
                      getMy().then(res=>{
                        if(res.data.status===0){
                          this.mychooseData=res.data.data
                        }
                      })
                    })
                    this.$message({
                      message: '选课成功',
                      type: 'success'
                    })
                  }else{
                    this.$message({
                      message: '选课失败',
                      type: 'error'
                    })
                  }
                })
              },300)
            }else{
              this.$message({
                message: '课程冲突',
                type: 'error'
              })
            }
          }
        }else{
          this.$message({
            message: '选课失败',
            type: 'error'
          })
        }
      })
    },
    deleteChoose(row){
      deleteStuC({cid:row.cid}).then(res=>{
        if(res.data.status===0){
          setTimeout(()=>{
            getMy().then(res=>{
              if(res.data.status===0){
                this.mychooseData=res.data.data
                this.$message({
                  message: '退课成功！',
                  type: 'success'
                })
              }
            })
          },100)
        }else{
          this.$message({
            message: '退课失败，请稍后再试！',
            type: 'error'
          })
        }
      })
    },
    onSubmit() {
      this.$refs.searchForm.validate((valid)=>{
        if(valid){
          const newForm={}
          for (let key in this.searchForm){
            if(this.searchForm[key]){
              newForm[key]=this.searchForm[key]
            }
          }
          if(Object.keys(newForm).length){
            searchCourse(newForm).then(res=>{
              if(res.data.status===0){
                this.chooseData=res.data.data
              }else{
                this.$message({
                message: res.data.message,
                type: 'error'
                })
              }
              this.$refs.searchForm.resetFields()
            })
          }else{
            this.$message({
              message: '数据不能都为空',
              type: 'warning'
            })
          }
          this.$refs.searchForm.resetFields()
        }
      })
    },
    all(){
      this.$nextTick(()=>{
        getChoose().then(res=>{
          if(res.data.status===0){
            this.chooseData=res.data.data
          }
        })
      })
    }
  },
  mounted(){
    this.$nextTick(()=>{
      getChoose().then(res=>{
        if(res.data.status===0){
          this.chooseData=res.data.data
        }
      })
    })
    this.$nextTick(()=>{
      getMy().then(res=>{
        if(res.data.status===0){
          this.mychooseData=res.data.data
        }
      })
    })
  }
}
</script>

<style scoped>
.cell{
  text-align: center;
}
.course{
  margin-bottom: 10px;
}
.mychoose{
  margin-left: 20px;
  margin-bottom: 5px;
}
</style>